<template>
  <div>
    <div class="upload-list-content ">
      <div v-for="(file, index) in previewFileList" :key="index" style="display: inline-block">
        <div class="previewList relative theme-color-F0F5FA-bg  theme-color-4374A6 upload-list-item ">
          <span>
            <i class="el-icon-paperclip m-l-10"></i>
            {{ file.name }}
            <i class="el-icon-close mg-l-10 theme-color-red fw-600 pointer" v-if="showUpload" @click="handleRemove(file)"></i>
            <div class="absolute hiden-img" style="position: absolute; top: 0; left: 0">
              <el-image style="width: 40px; height: 40px" :src="BASE_URL + file.url" :preview-src-list="filterImg(previewFileList)
                ">
              </el-image>
            </div>
          </span>
        </div>
      </div>
      <el-upload style="display: inline-block" :action='BASE_URL + "/attachment"' :on-preview="handlePreview"
        :with-credentials="true" :data="step
          ? {
            fid: listId,
            type: fileType,
            step: step,
          }
          : {
            fid: listId,
            type: fileType,
          }
          " :on-remove="handleRemove" :before-remove="beforeRemove" :on-success="handleSuccess" :file-list="fileList"
        :show-file-list="false">
        <el-button slot="trigger" size="small" type="primary" class="upload-btn" v-if="showUpload">
          <i class="el-icon-upload2 m-l-10"></i>
          上传</el-button>
      </el-upload>
    </div>
    <el-dialog :visible.sync="dialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>

export default {
  name: "cusUpload",
  props: {
    /*查询文件列表的id*/
    listId: {
      type: String,
      default: "",
    },
    /**文件类型 */
    fileType: {
      type: String,
      required: true,
    },
    /**step */
    step: {
      type: String,
      default: () => "",
    },
    fileList: {
      type: Array,
      default: () => [],
    },
    /**是否显示上传按钮 */
    showUpload: {
      type: Boolean,
      default: () => true,
    },
  },

  data() {
    return {
      BASE_URL: process.env.VUE_APP_BASE_URL,
      previewFileList: [],
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },
  watch: {
    fileList: {
      handler(newVal) {
        this.previewFileList = newVal;
      },
      immediate: true,
    },
  },

  methods: {
    filterImg(list) {
      const _list = [];
      list?.forEach((item) => {
        // let v = {};
        _list.push(`${this.BASE_URL + item.url}`);
        // const reg = /(\.(png|jpeg|jpg)$)/;
        // if (item.extra) v = item.extra;
        // if (reg.test(v.path)) {
        //   _list.push(`${item.url}`);
        // }
      });
      return _list;
    },
    async handleRemove(file, fileList) {

      if (file.response) {
        const res = await this.$axios.delete(`/attachment?id=${file.response.id}`);
        if (!res.data.errors) {
          this.$message.success("删除成功");
        }
      } else {
        const res = await this.$axios.delete(`/attachment?id=${file.id}`)
        if (!res.data.errors) {
          this.$message.success("删除成功");
        }
      }
      this.previewFileList.splice(this.previewFileList.indexOf(file), 1);
      this.$emit("getFileList", this.previewFileList);

    },
    handleSuccess(response, file, fileList) {
      this.previewFileList = fileList;
      this.$emit("getFileList", fileList);
    },
    handlePreview(file) {

      this.dialogVisible = true;
      if (file.raw) {
        this.dialogImageUrl = URL.createObjectURL(file.raw);
      } else {
        this.dialogImageUrl = process.env.VUE_APP_BASE_URL + file.url;
      }
    },

    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
  },
};
</script>
<style scoped lang="scss">
.hiden-img {
  overflow: hidden;
  opacity: 0;
}

.upload-list-content {
  display: inline-block;
  width: 100%;
  /* 定义容器宽度 */
  word-wrap: break-word;
  /* 允许在单词内换行 */
  overflow-wrap: break-word;
  /* 同上，现代浏览器推荐使用这个属性别名 */
  white-space: normal;

  /* 允许自动换行 */
  .upload-list-item {

    height: 38px;
    display: inline-block;
    text-align: left;
    padding: 0 6px;
    text-align: center;
    margin-right: 4px;
  }

  .upload-btn {
    display: inline-block;
    vertical-align: top;
    height: 38px;
  }
}</style>